<template>
    <el-container class="main-container">
        <el-header class="main-header" height="70px">
            <span class="main-logo">学生信息管理系统</span>
            <el-menu
                    :default-active="actionIndex"
                    class="main-header-menu"
                    mode="horizontal"
                    @select="handleSelectFirst"
                    background-color="#324769"
                    text-color="#fff"
                    active-text-color="#FFF">
                <el-menu-item
                        v-for="item in navList"
                        :index="item.id"
                        :key="item.id">{{item.title}}</el-menu-item>
            </el-menu>
            <div class="main-right">
                <span class="main-reset-password" @click="openModify">修改密码</span>
                <span class="main-logout" @click="handleLogout">注销</span>
            </div>
        </el-header>
        <el-container>
            <el-aside class="main-aside" width="200px" v-if="subNavList && subNavList.length">
                <el-menu
                        :default-active="subActionIndex"
                        class="el-menu-vertical-demo"
                        background-color="#FFF"
                        text-color="#444"
                        active-text-color="#FFF"
                        @select="handleSelectSub">
                    <el-menu-item
                            v-for="item in subNavList"
                            :index="item.name"
                            :key="item.id">
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <slot name="body"></slot>
            </el-main>
        </el-container>
        <el-dialog
                title="修改密码"
                :visible.sync="dialogModify"
                width="280"
                @closed="closeModify">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="用户ID" prop="userId">
                    <el-input v-model="form.userId"></el-input>
                </el-form-item>
                <el-form-item label="旧密码" prop="oldPassword">
                    <el-input type="password" v-model="form.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="form.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="密码确认" prop="confirmPassword">
                    <el-input type="password" v-model="form.confirmPassword"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeModify">取 消</el-button>
                <el-button type="primary" @click="confirmModify">确 定</el-button>
            </span>
        </el-dialog>
    </el-container>
</template>

<script>
    import Api from '@utils/api';

    export default {
        name: "framework",
        props: {
            navData: Array
        },
        data () {
            var validatorNewPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.form.confirmPassword !== '') {
                        this.$refs.form.validateField('confirmPassword');
                    }
                    callback();
                }
            };
            var validatorConfirmPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                navList: null,
                subNavList: null,
                actionIndex: '',
                subActionIndex: '',
                dialogModify: false,
                form: {
                    userId: '',
                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: ''
                },
                rules: {
                    userId: [
                        {required: true, message: '请输入用户ID', trigger: 'blur'}
                    ],
                    oldPassword: [
                        {required: true, message: '请输入旧密码', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {validator: validatorNewPassword, trigger: 'blur'}
                    ],
                    confirmPassword: [
                        {required: true, message: '请再次输入密码', trigger: 'blur'},
                        {validator: validatorConfirmPassword, trigger: 'blur'}
                    ]
                }
            }
        },
        watch: {
            navData (val) {
                this.navList = val;
                this.actionIndex = this.navList[0].id;
            },
            navList (val) {
                if (val) {
                    this.subNavList = this.navList[0].children || [];
                    if (this.subNavList.length) {
                        this.subActionIndex = this.subNavList[0].name;
                    }
                    else {
                        this.subActionIndex = this.navList[0].name;
                    }
                    // this.subActionIndex = this.subNavList.length ? this.subNavList[0].name : '';
                }
            },
            subActionIndex (val) {
                if (val) {
                    this.$emit('changeView', val);
                }
            }
        },
        methods: {
            handleSelectFirst (key) {
                this.subNavList = this.navList[key].children || [];

                if (this.subNavList.length) {
                    this.subActionIndex = this.subNavList[0].name;
                }
                else {
                    this.subActionIndex = this.navList[key].name;
                }
                // this.subActionIndex = this.subNavList.length ? this.subNavList[0].name : '';
            },
            handleSelectSub (key) {
                this.$emit('changeView', key);
            },
            openModify () {
                this.dialogModify = true;
            },
            closeModify () {
                this.dialogModify = false;
                this.$refs['form'].resetFields();
            },
            confirmModify () {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        Api({
                            method: 'post',
                            url: '/modifyPassword',
                            data: {
                                user_id: this.form.userId,
                                old_password: this.form.oldPassword,
                                new_password: this.form.newPassword
                            }
                        }).then(res => {
                            this.$notify({
                                type: 'success',
                                title: '修改成功！'
                            });

                            window.location.reload();
                        });
                    } else {
                        this.$notify({
                            title: '提交失败!请重新提交。',
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            handleLogout () {
                this.clearAllCookie();
                window.location.reload();
            },
            //清除所有cookie函数
            clearAllCookie() {
                let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
                if(keys) {
                    for(let i = keys.length; i--;)
                        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString();
                }
            }

    },
        created () {
            if (this.navData) {
                this.navList = this.navData;
                this.actionIndex = this.navList[0].id;
            }
        }
    }
</script>

<style type="text/scss" lang="scss">
    .el-header, .el-footer {
        /*background-color: #B3C0D1;*/
        color: #333;
        text-align: center;
        line-height: 70px;
    }

    .el-main {
        /*background-color: #FFF;*/
        color: #333;
    }
    .main {
        &-container {
            min-width: 1000px;
            .el-menu-item {
                font-size: 16px;
            }
        }
        &-header {
            position: relative;
            background-color: #324769;
            &-menu {
                display: inline-block;
                margin-left: 200px;
            }
            .el-menu--horizontal>.el-menu-item {
                height: 70px;
                line-height: 70px;
            }
            .el-menu {
                border-bottom: 0;
            }
            .el-menu-item.is-active {
                border-bottom-color: #409EFF !important;
            }
            .main-right {
                color: #FFF;
                float: right;
                span {
                    cursor: pointer;
                    &:hover {
                        color: #409EFF;
                    }
                }
            }
            .main-reset-password {
                margin-right: 20px;
            }
        }
        &-logo {
            display: inline-block;
            position: absolute;
            left: 30px;
            color: #FFF;
            font-weight: bold;
            font-size: 24px;
        }
        &-aside {
            padding-top: 50px;
            background-color: #FFF;
            color: #333;
            text-align: center;
            .el-menu-item.is-active {
                background-color: #E0F9FA;
            }
            .el-menu {
                border-right: 0;
            }
            .is-active {
                background-color: rgba(64, 158, 255, 0.35) !important;
                border-left: 3px solid #409EFF;
            }
        }

    }
</style>